
// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;


// 渲染列表
function render() {
  axios({
    method: 'GET',
    url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
    // 自定义请求头
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    console.log(res);
    // 判断请求成功
    if (res.status === 0) {
      // 先清空
      $('tbody').empty()
      // 遍历数据 --- 渲染
      res.data.forEach(obj => {
        const theTr = `<tr>
                          <td>${obj.name}</td>
                          <td>${obj.alias}</td>
                          <td>
                            <button myid="${obj.Id}"
                              data-name="${obj.name}"
                              data-alias="${obj.alias}"
                              type="button" class="layui-btn layui-btn-xs edit">编辑
                            </button>
                      
                            <button myid="${obj.Id}" type="button" class="layui-btn 
                                    layui-btn-xs layui-btn-danger delete">
                                    删除
                            </button>
                          </td>
                        </tr>`
        $('tbody').append(theTr)
      })
    }
  })
}
render()

// 删除功能
$('tbody').on('click', '.delete', function () {
  const Id = $(this).attr('myid')
  // console.log(Id);
  axios({
    method: 'GET',
    url: `http://api-breakingnews-web.itheima.net/my/article/deletecate/${Id}`, // rest接口风格 简洁
    headers: {
      Authorization: localStorage.getItem('token')
    },
  }).then(({ data: res }) => {
    // console.log(res);
    layer.msg(res.message)
    if (res.status === 0) {
      // render() // 重新渲染
      $(this).parents('tr').remove() // 自爆
    }
  })
})


// 编辑功能
$('tbody').on('click', '.edit', function () {
  // 分类的名字
  const name = $(this).attr('data-name')
  // 分类的别名
  const alias = $(this).attr('data-alias')

  // 分类的Id  -- 大写
  const Id = $(this).attr('myid')

  let index = layer.open({
    type: 1,
    title: '编辑类别',
    area: ['500px', '300px'],
    content: edit_str,//这里content是一个普通的String
    success: function () { // 弹窗成功后的回调
      // 方式一:
      // $('input[name="name"]').val(name)
      // $('input[name="alias"]').val(alias)

      // 方式二: layui form表单的快速赋值
      form.val('edit', {
        name, alias, Id
      })

      // 给form表单注册submit事件
      $('form').on('submit', function (e) {
        e.preventDefault()
        axios({
          method: 'POST',
          url: 'http://api-breakingnews-web.itheima.net/my/article/updatecate',
          // 自定义请求头
          headers: {
            Authorization: localStorage.getItem('token')
          },
          data: $('#edit_form').serialize()
        }).then(({ data: res }) => {
          layer.msg(res.message)
          // console.log(res);
          if (res.status === 0) {
            // (1)关掉弹出层
            layer.close(index)
            // (2)重新渲染
            render()
          }
        })


      })
    }
  });

})


// 添加功能
$('.add').on('click', function () {
  let index = layer.open({
    type: 1,
    title: '添加类别',
    area: ['500px', '300px'],
    content: add_str,//这里content是一个普通的String
    success: function () { // 弹窗成功后的回调
      // 注册表单的submit事件
      $('.add-form').on('submit', function (e) {
        e.preventDefault()
        axios({
          method: 'POST',
          url: 'http://api-breakingnews-web.itheima.net/my/article/addcates',
          // 自定义请求头
          headers: {
            Authorization: localStorage.getItem('token')
          },
          data: $('.add-form').serialize()
        }).then(({ data: res }) => {
          layer.msg(res.message)
          // console.log(res);
          if (res.status === 0) {
            // (1)关掉弹出层
            layer.close(index)
            // (2)重新渲染
            render()
          }
        })
      })
    }
  });

})


// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;



const form = layui.form;
form.verify({
  ctname: [
    /^[\u4E00-\u9FA5]+$/,
    "分类名只能是中文"
  ],
  aliname: [
    /^[a-z0-9]+$/,
    "小写英文和数字组成"
  ]
})

